import React, { useEffect, useState } from 'react';
import './Map.less';
import AMapLoader from '@amap/amap-jsapi-loader';
import request from '../../../utils/axios';
import { useSelector } from 'react-redux';
declare var AMap: any;

const Map: React.FC = () => {
    const coordinate = useSelector((store: any) => store.counter.coordinate);
    const [ridersPositions, setRidersPositions] = useState([]);

    // 获取配送员信息
    const getManage = async () => {
        request.get('manage').then(response => {    
            let positions:any=[]        
            response.forEach((item: any) => {
                if(item.basicInfo.status=='接单中'){
                    positions.push([item.basicInfo.deliveryLocation.longitude,item.basicInfo.deliveryLocation.latitude])
                    setRidersPositions(positions);
                } 
            });
        }).catch(error => {
            console.log(error);
        });
    };

    const initMap = () => {
        // 初始化地图
        const map = new AMap.Map('container', {
            zoom: 13,
            center: [115.48858045790001, 38.815004611546]
        });

        // 创建配送区域
        function createDeliveryArea(points: any) {
            const polygon = new AMap.Polygon({
                path: points,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });
            polygon.setMap(map);
            return polygon; // 返回创建的多边形
        }

        // 添加站点标记
        function addStationMarker(position: any, options: any) {
            const marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(-10, -25),
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                ...options
            });
            marker.setMap(map);
        }

        // 添加骑手标记
        function addRiderMarker(position: any, options: any) {
            const marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(-10, -25),
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
                ...options
            });
            marker.setMap(map);
            return marker; // 返回创建的标记
        }

        // 更新骑手位置
        function updateRiderPosition(marker: any, newPosition: any) {
            marker.setPosition(newPosition);
        }

        // 定义配送区域坐标
        const deliveryAreaPoints = [
            [115.48858045790001 - 0.04, 38.815004611546 - 0.04], // 左下角
            [115.48858045790001 + 0.04, 38.815004611546 - 0.04], // 右下角
            [115.48858045790001 + 0.05, 38.815004611546 + 0.05], // 右上角
            [115.48858045790001 - 0.05, 38.815004611546 + 0.05]  // 左上角
        ];

        // 创建配送区域
        createDeliveryArea(deliveryAreaPoints);

        // 添加中心站点
        const centerStationPosition = [115.48858045790001, 38.815004611546];
        addStationMarker(centerStationPosition, { title: '中心站点' });

        // 骑手位置数据
        // const ridersPositions = [
        //     [115.48858045790001 - 0.003, 38.815004611546 - 0.003], // 骑手1
        //     [115.48858045790001 + 0.003, 38.815004611546 - 0.003], // 骑手2
        //     [115.48858045790001, 38.815004611546], // 骑手3
        //     [115.48858045790001 + 0.003, 38.815004611546 + 0.003], // 骑手4
        //     [115.48858045790001 - 0.003, 38.815004611546 + 0.003]  // 骑手5
        // ];

        // 添加骑手
        const ridersMarkers = ridersPositions.map(position => addRiderMarker(position, { title: '骑手' }));

        // 示例更新骑手位置
        // setTimeout(() => {
        //     const updatedPositions = [
        //         [115.48858045790001 - 0.003, 38.815004611546 - 0.0025], // 骑手1的新位置
        //         [115.48858045790001 + 0.003, 38.815004611546 - 0.0025], // 骑手2的新位置
        //         [115.48858045790001, 38.815004611546 + 0.001], // 骑手3的新位置
        //         [115.48858045790001 + 0.003, 38.815004611546 + 0.0025], // 骑手4的新位置
        //         [115.48858045790001 - 0.003, 38.815004611546 + 0.0025]  // 骑手5的新位置
        //     ];
        //     ridersMarkers.forEach((marker, index) => {
        //         updateRiderPosition(marker, updatedPositions[index]);
        //     });
        // }, 3000);
    };

    useEffect(() => {
        initMap();
        getManage();
    }, []);

    return (
        <div id="container"></div>
    );
};

export default Map;